<template>
	<view class="" style="overflow-y: hidden;color:#fff">
		<u-navbar @leftClick='leftClick' leftIconSize="40" :placeholder='true'
			:leftIconColor="pagesScrollHeight ==0?'#fff':'#000'"
			:titleStyle="{'font-size':'20px','font-weight':600,color: pagesScrollHeight ==0 && !isPC() ?'#fff':'#000'}"
			:title="reportName" :bgColor="pagestitileBgColor">
		</u-navbar>
		<!-- <u-sticky offset-top="200"> -->
		<view class="reportTitle">
			<image class="reportTitleImage" src="@/static/image/top.png" mode=""></image>
			<view class="" style="margin-top: 68px;">
				<text
					:style="isPC() ? 'color:black' : ''"
					style="margin: 0 0 10px 15px;display: block;font-size: 12px;">{{subjectName}}</text>
				<view class="reportCart white-bg color-black flex" style="flex-direction: column;align-items: center;">
					<view class="flex-jc-s-b width-100">
						<text class="color-cell"
							style="font-size: 12px;">交卷时间:{{detailInfo.data.submitTime||'00:00:00'}}</text>
						<!-- <text class="identTtile" v-if="detailInfo.data.markText">{{detailInfo.data.markText}}</text> -->
						<image v-if="request.mode=='test'" style="width: 82px;height:15px" :src="markImg" mode="">
						</image>
						<view v-if="request.mode == 'exam'" :class="isExamPass ? 'color-blue' : 'color-red'" style="font-size: 15px;font-weight: 600">{{isExamPass ? '恭喜你！考试及格！' : '考试不及格！'}}</view>
					</view>
					<view class="circle" style="margin: 16px 0;">
						<view class="circle_left ab"
							:style="renderLeftRate(detailInfo.data.mark||(detailInfo.data.accuracy*100).toFixed()||0)">
						</view>
						<view class="circle_right ab"
							:style="renderRightRate(detailInfo.data.mark||(detailInfo.data.accuracy*100).toFixed()||0)">
						</view>
						<view class="circle_text">
							<span class="name" v-if="request.mode=='test' || request.mode == 'exam'"
								style="font-size: 23px;font-family: DIN;font-weight: bold;">{{detailInfo.data.mark||0}}</span>
							<span class="name" v-else
								style="font-size: 23px;font-family: DIN;font-weight: bold;">{{detailInfo.data.accuracy!=undefind?(detailInfo.data.accuracy*100).toFixed():0}}%</span>
							<span class="value" style="font-size: 11px;color: #858B9B;font-family: PingFang SC;">
								- {{request.mode=='test' || request.mode == 'exam'?'得分':'正确率'}}-
							</span>
						</view>

					</view>
					<view class="" v-if="request.mode == 'practice'"
						style="font-size: 12px;font-family: PingFang SC;color: #858B9B;margin: -9px 0 5px 0;font-weight: 300;">
						答对题数/已做题数
					</view>

					<!--  -->
					<view class="flex-jc-s-b width-100" style="margin-top: 0px;font-weight: bold;font-size: 22px">
						<view class="flex-column report-content-text">
							<text class="text-gray margin-t-10px">{{request.mode=='test' || request.mode == 'exam'?'考试时间':'练习时间'}}</text>
							<text style="margin-top: 5px;">{{detailInfo.data.durationSecond||'00:00'}}</text>
						</view>
						<view class="height-line-text " />
						<view class="flex-column report-content-text">
							<text class="text-gray nowrap margin-t-10px">我的错题</text>
							<text style="margin-top: 5px;">{{detailInfo.data.errorAmount}}</text>
						</view>
						<view class="height-line-text" />
						<view class="flex-column report-content-text">
							<text class="text-gray margin-t-10px">{{request.mode=='test' || request.mode == 'exam'?'总题数':'本次答题数'}}</text>
							<text
								style="margin-top: 5px;">{{request.mode=='test' || request.mode == 'exam'?detailInfo.data.totalAmount:detailInfo.data.answerAmount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="white-bg reportCart" style="margin-top: 25px;">
				<view class="flex-jc-s-b" style="color:rgb(158, 163, 175);">
					<view style="color:#333333;font-size: 16px;font-family: PingFang SC;font-weight: bold;">答题卡</view>
					<view class="flex" style="font-weight:300;font-size: 12px;">
						<view class="flex-center" style="margin-right: 15px;">
							<view class="circle-title" style="background-color: rgba(32, 198, 134,0.2);border: none;">
							</view>
							<view>正确</view>
						</view>
						<view class="flex-center" style="margin-right: 15px">
							<view class="circle-title" style="background-color: rgba(253, 75, 57,0.2);border: none;">
							</view>
							<view>错误</view>
						</view>
						<view class="flex-center" style="">
							<view class="circle-title"></view>
							<view>未做</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 100%;height: 1px;background-color: rgba(0,0,0,0.1);margin: 14px 0;"></view>
				<view class="">
					<questionCart @clickCart='clickCart' :questionList='detailInfo.data.questionList'></questionCart>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="" style="height: 78px;" />
		<view class="flex footBut" style="justify-content: center;max-width:1160px" :style="isPC() ? 'margin-left:15px;padding-top:15px;' : ''">
			<u-button :customStyle="{ 'width': '48%', 'border-color':'#366DE8',color:'#366DE8', 'margin-left': 20 }"
				type="primary" :plain="true" shape="circle" text="返回首页" v-if="request.showBackHome"
				@click="routePage('/tabBarPages/index/index')"></u-button>
			<u-button
				@click="goPractice(true)"
				:customStyle="{ 'width': '48%', background:'#366DE8',border:'none', 'margin-left': 20 }" type="primary"
				shape="circle" text="查看错题">
			</u-button>
		</view>
		<!-- </u-sticky> -->
	</view>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance, watch } from "vue";
	import { onLoad, onPageScroll } from "@dcloudio/uni-app";
	import { trainDetail } from '@/api/pages'
	import AES from '@/utils/aesUtil.js'
	import questionCart from '../components/questionCart.vue'
	import { timeStamp, getTime } from '@/utils/timeStamp.js'
	import pageRoute from '@/utils/pageRoute'
	import down60 from '@/static/image/mark/60down.png'
	import down80 from '@/static/image/mark/80down.png'
	import down90 from '@/static/image/mark/90down.png'
	import up90 from '@/static/image/mark/90up.png'
	import onShare from '@/utils/share.js';
	
	const {onShareAppMessage,onShareTimeline} = onShare()
	const reportName = ref('练习报告')
	const markImg = ref(down60)
	const pagesScrollHeight = ref(0)
	const pagestitileBgColor = ref('rgba(247, 247, 247,0)')
	const subjectName = ref('')
	const request = reactive({
		id: '',
		mode: 'test'
	})
	const isExamPass = ref()
	let detailInfo = reactive({
		data: {}
	})
	const routePage = (path) => {
		uni.$u.route({
			url: path,
		})
	}
	const leftClick = () => {
		if (request.isBback) {
			uni.$u.route({
				type: 'back'
			})
		} else {
			uni.$u.route({
				url: 'tabBarPages/index/index',
				type: 'redirect'
			})
		}

	}
	const clickCart = (row, index) => {
		goPractice(false, index)
	}
  
  const goPractice = (onlyWrong, index) => {
    let page = request.isPC ? 'practice-pc' :  'practice'
    let param = {
    	id: request.id,
    	isHistory: true,
    	type: request.mode,
    	selectedIndex: index,
    	courseName: detailInfo.data.courseName || '',
    	examName: request.examName,
    	username: request.username
    }
    if (onlyWrong) {
      param.onlyWrong = true
    }else{
      param.selectedIndex = index
    }
    
    pageRoute.route('pages/paper/' + page, param)
  }
  
	const homeInfo = reactive({
		model: {},
		lastInfo: { practise: {}, test: {} },
		course: {},
	})
	onPageScroll((res) => {
		pagesScrollHeight.value = res.scrollTop
		if (isPC()){
			return;
		}
		
		if (res.scrollTop < 500) { pagestitileBgColor.value = 'rgba(247, 247, 247,' + res.scrollTop * 0.002 + ')' }
		if (res.scrollTop > 500) { pagestitileBgColor.value = 'rgba(247, 247, 247,' + 1 + ')' }
		if (res.scrollTop = 0) { pagestitileBgColor.value = 'rgba(247, 247, 247,' + 0 + ')' }
	})
	onLoad((option) => {
		if (isPC()) {
			pagestitileBgColor.value = 'rgba(247, 247, 247,' + 1 + ')'
		}
		
		request.isBback = option.isBback || false
		request.id = option.id
		request.mode = option.mode
		request.showBackHome = option.showBackHome != 'false' ? true : false
		request.examName = option.examName
		request.username = option.username
    request.isPC = option.isPC == 'true' ? true : false
		if (request.mode == 'exam') {
			subjectName.value = '试卷名称:' + option.examName
		}
		switch (option.mode) {
			case 'practice':
				reportName.value = '练习报告'
				break;
			case 'practise':
				reportName.value = '练习报告'
				break;
			case 'exam':
				reportName.value = '考试报告'
				break;
			case 'test':
				reportName.value = '考试报告'
				break;
			default:
				reportName.value = '未知'
		}
		initDetail()
	})
	
	function isPC() {
		return window && window.orientation == undefined ? true : false;
	}

	function generateQuestionGroupList(currentList) {
		let rsList = [];
		let lastCode = "";
		let list = [];
		let i = 0;
		currentList.forEach((item) => {
			item.indexValue = i;
			let typeCode = item.caseFlag == 1 ? "case" : item.typeCode;
			let typeName = item.caseFlag == 1 ? "案例题" : item.typeName;
			if (lastCode == typeCode) {
				list.push(item);
			} else {
				list = [];
				let groupItem = {};
				groupItem.code = typeCode;
				groupItem.name = typeName;
				groupItem.list = list;
				list.push(item);
				rsList.push(groupItem);
				lastCode = typeCode;
			}
			i++;
		});
		return rsList
	}
	// 获取详情
	const initDetail = () => {
		trainDetail(request.id).then((res) => {
			res.data ? detailInfo.data = AES.decrypt(res.data) : ''
			// console.log(detailInfo.data, 'detailInfo.data')
			detailInfo.data.submitTime = timeStamp(detailInfo.data.submitTime)
			detailInfo.data.durationSecond = getTime(detailInfo.data.durationSecond)
			detailInfo.data.questionList = generateQuestionGroupList(detailInfo.data.questionList)
			if (request.mode != 'exam') {
				subjectName.value = '科目名称:' + (detailInfo.data.courseName || '')
			}
			
			if (request.mode == 'exam') {
				isExamPass.value = detailInfo.data.passedFlag == 1 ? true : false
			}
			
			if (detailInfo.data.mark < 60) { markImg.value = down60 }
			if (detailInfo.data.mark >= 60 && detailInfo.data.mark < 80) { markImg.value = down80 }
			if (detailInfo.data.mark >= 80 && detailInfo.data.mark < 90) { markImg.value = down90 }
			if (detailInfo.data.mark >= 90) { markImg.value = up90 }
		})
	}
	const renderRightRate = (rate) => {
		if (rate < 50) {
			return 'transform: rotate(' + 3.6 * rate + 'deg);';
		} else {
			return 'transform: rotate(0);border-color: #00C895;';
		}
	};
	const renderLeftRate = (rate) => {
		if (rate >= 50) {
			return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
		}
	};
</script>

<style lang="scss" scoped>
	.report-content-text {
		font-weight: bold;
		font-size: 22px;
		width: 32%;
	}

	.height-line-text {
		height: 23px;
		width: 1px;
		background-color: #858B9B;
		opacity: 0.3;
	}

	.circle-title {
		width: 12px;
		height: 12px;
		display: block;
		border-radius: 50%;
		border: 1px solid;
		margin-right: 7px;
	}

	// @font-face {
	// 	font-family: YSBTH;
	// 	src: url('../../static/font/YSBTH.TTF');
	// }

	.footBut {
		height: 78px;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		padding: 5px 15px 0 15px;
	}

	.reportTitle {
		.reportCart {
			width: 100%;
			padding: 14px 15px;
			border-radius: 8px;
		}

		.identTtile {
			// font-style: oblique;
			font-size: 20px;
			font-family: 'YSBTH';
			// font-weight: 600;
			color: transparent;
			background-clip: text;
			background-image: linear-gradient(#70bbff, #366de8);
		}

		padding: 0 15px;
		min-height: calc(100vh - 98px);
		border: 1px solid rgba(0, 0, 0, 0);
		margin-top: -44px;

		.reportTitleImage {
			width: 100%;
			// height: 14.5rem;
			position: absolute;
			top: 0;
			z-index: -1;
			left: 0
		}
	}

	.circle {
		width: 106px;
		height: 106px;
		position: relative;
		border-radius: 50%;
		// top: 50px;
		box-shadow: inset 0 0 0 5px #00C895;

		.ab {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		&_left {
			border: 5px solid rgb(244, 245, 246);
			border-radius: 50%;
			clip: rect(0, 53px, 106px, 0);
		}

		&_right {
			border: 5px solid rgb(244, 245, 246);
			border-radius: 50%;
			clip: rect(0, 106px, 106px, 53px);
		}

		&_text {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// color: #fff;

			.name {
				margin-bottom: 4px;
			}
		}
	}
</style>